<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>音乐播放器</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100vh;
    }
    .cover{
      position: absolute;
      content:'';
      display: block;
      width: 100%;
      height: 100%;
      background: url(http://cloud.hunger-valley.com/17-9-22/87786461.jpg)  center center no-repeat;
      background-size: cover;
      filter: blur(5px);
    }
    .musicbox {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      font-family: cursive;
      font-size: 16px;
      color: #f06d6a;
      width: 340px;
    }
    .music-panel {
      border: 1px solid #76dba3;
      padding: 20px 20px 5px 20px;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
      background-color: rgba(255, 255, 255, 0.9);
    }    
    .musicbox .control {
      margin-top: 20px;
      font-size: 22px;
      color: #ee8a87;
      float: left;
    }
    
    .musicbox .control .fa {
      margin-right: 12px;
      cursor: pointer;
    }
    
    .musicbox .control .fa.disable {
      opacity: 0.3;
    }
    
    .musicbox .info {
      margin-left: 120px;
    }
    
    .musicbox .info .title {
      font-size: 18px;
    }
    
    .musicbox .info .auther {
      font-size: 13px;
    }
    
    .musicbox .progress {
      width: 260px;
    }
    
    .musicbox .progress .bar {
      height: 3px;
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    
    .musicbox .progress .progress-now {
      background-color: #ee8a87;
      height: 3px;
      width: 0;
      position: relative;
    }
    
    .musicbox .time {
      text-align: right;
    }
    
    .musicbox:after,
    .musicbox .music:after {
      content: '';
      display: block;
      clear: both;
    }

    .musicbox .list{
      list-style: none;
    }
    .musicbox .list>li{
      position: relative;
      padding: 4px 10px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-top: none;
      overflow: hidden;
      cursor: pointer;
    }
    .musicbox .list>li:hover {
      background-color: rgba(255,255, 255,0.5);
    }
    .musicbox .list>li.playing:before{
      position: absolute;
      top: 0;
      left: 0;
      content:'';
      display: inline-block;
      width: 8px;
      height: 30px;
      background: rgba(255, 255, 255, 0.8);
    }
  </style>
</head>

<body>
  <div class="cover"></div>
  <div class="musicbox">
    <div class="music-panel">
      <div class="music">
        <div class="control">
          <span class="back"><i class="fa fa-step-backward"></i></span>
          <span class="play"><i class="fa fa-pause"></i></span>
          <span class="forward"><i class="fa fa-step-forward"></i></span>
        </div>
        <div class="info">
          <div class="title">My song</div>
          <div class="auther">ruoyu</div>
        </div>
      </div>

      <div class="progress">
        <div class="bar">
          <div class="progress-total"></div>
          <div class="progress-now"></div>
        </div>
        <div class="time">0:00</div>
      </div>      
    </div>
    <ul class="list">
      <!-- <li>贰佰-玫瑰 <i class="fa fa-play"></i></li> -->
    </ul>

  </div>


  <script>
    // var musicList = [{
    //   src: 'http://cloud.hunger-valley.com/music/ifyou.mp3',
    //   title: 'IF YOU',
    //   auther: 'Big Bang',
    //   img: 'http://cloud.hunger-valley.com/17-9-22/87786461.jpg'
    // }, {
    //   src: 'http://cloud.hunger-valley.com/music/玫瑰.mp3',
    //   title: '玫瑰',
    //   auther: '贰佰',
    //   img: 'http://cloud.hunger-valley.com/17-9-22/28212907.jpg'
    // }]

    /*
        function Player(ct, musicList){
          this.ct = ct
          this.musicList = musicList
          this.init()
          this.bind()
          this.start()
        }

        Player.prototype = {
          init: function(){

          },
          bind: function(){

          },
          start: function(){

          }
        }

        new Player(musicList)
    */

  /*
    var musicList = [{
        src: 'http://cloud.hunger-valley.com/music/玫瑰.mp3',
        title: '玫瑰',
        auther: '贰佰'
      }, {
        src: 'http://cloud.hunger-valley.com/music/ifyou.mp3',
        title: 'IF YOU',
        auther: 'Big Bang'
      }

    ]
    */

    var cover = document.querySelector('.cover')
    var backBtn = document.querySelector('.musicbox .back')
    var playBtn = document.querySelector('.musicbox .play')
    var forwardBtn = document.querySelector('.musicbox .forward')
    var titleNode = document.querySelector('.musicbox .title')
    var authorNode = document.querySelector('.musicbox .auther')
    var timeNode = document.querySelector('.musicbox .time')
    var progressBarNode = document.querySelector('.musicbox .progress .bar')
    var progressNowNode = document.querySelector('.musicbox .progress-now')
    var musicListContainer = document.querySelector('.musicbox .list')
    var timer
    var musicList

    var music = new Audio()
    music.autoplay = true
    var musicIndex = 0

    getMusic(function(list){
      musicList = list
      setPlaylist(list)
      loadMusic(list[musicIndex])
    })
    

    playBtn.onclick = function() {
      var icon = this.querySelector('.fa')
      if (icon.classList.contains('fa-play')) {
        music.play()
      } else {
        music.pause()
      }
      icon.classList.toggle('fa-play')
      icon.classList.toggle('fa-pause')
    }

    forwardBtn.onclick = loadNextMusic
    backBtn.onclick = loadLastMusic
    music.onended = loadNextMusic
    music.shouldUpdate = true


    music.onplaying = function() {
      timer = setInterval(function() {
        updateProgress()
      }, 1000)
      console.log('play')
    }
    music.onpause = function() {
        console.log('pause')
        clearInterval(timer)
      }

    music.ontimeupdate = updateProgress

    progressBarNode.onclick = function(e) {
      var percent = e.offsetX / parseInt(getComputedStyle(this).width)
      music.currentTime = percent * music.duration
      progressNowNode.style.width = percent * 100 + "%"
    }

    musicListContainer.onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        for(var i = 0; i < this.children.length; i++){
          if(this.children[i] === e.target){
            musicIndex = i
          }
        }
        console.log(musicIndex)
        loadMusic(musicList[musicIndex])
      }
    }
    //fa-li fa fa-spinner fa-spin


    function setPlaylist(musiclist){
      var container = document.createDocumentFragment()
      musiclist.forEach(function(musicObj){
        var node = document.createElement('li')
        node.innerText = musicObj.auther + '-' + musicObj.title
        console.log(node)
        container.appendChild(node)
      })
      musicListContainer.appendChild(container)
    }

    function loadMusic(songObj) {
      music.src = songObj.src
      titleNode.innerText = songObj.title
      authorNode.innerText = songObj.auther
      cover.style.backgroundImage = 'url(' + songObj.img + ')'
      for(var i = 0; i < musicListContainer.children.length; i++){
        musicListContainer.children[i].classList.remove('playing')
      }
      musicListContainer.children[musicIndex].classList.add('playing')
    }

    function loadNextMusic() {
      musicIndex++
      musicIndex = musicIndex % musicList.length
      loadMusic(musicList[musicIndex])
    }

    function loadLastMusic() {
      musicIndex--
      musicIndex = (musicIndex + musicList.length) % musicList.length
      loadMusic(musicList[musicIndex])
    }

    function updateProgress() {
      var percent = (music.currentTime / music.duration) * 100 + '%'
      progressNowNode.style.width = percent

      var minutes = parseInt(music.currentTime / 60)
      var seconds = parseInt(music.currentTime % 60) + ''
      seconds = seconds.length == 2 ? seconds : '0' + seconds
      timeNode.innerText = minutes + ':' + seconds
    }

    function getMusic(callback) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'music.json', true)
      xhr.send()
      xhr.onload = function() {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          callback(JSON.parse(xhr.responseText))
        }
      }
    }
  </script>
</body>

</html>